.page-autocomplete {
	.input-group {
		width: 100%;

		.input-group-addon {
			align-items: center;
			background-color: transparent;
			border-color: transparent;
			color: $brand-light-secondary-text;
			display: flex;
			height: 1.5rem;
			justify-content: center;
			margin-top: -0.75rem;
			position: absolute;
			right: 0.875rem;
			top: 50%;
			z-index: 9;

			> .c-kbd {
				&:before {
					content: 'ctrl + ';
				}

				@at-root [data-platform='mac'] &:before {
					content: 'ctrl + ⌥ + ';
				}

				@at-root [data-platform='linux'] &:before {
					content: 'alt + ';
				}
			}

			.lexicon-icon {
				margin-top: 0;
			}
		}

		input.form-control {
			background-color: white;
			border-radius: 4px;
			padding-left: 0.875rem;
			padding-right: $base-size * 4;

			@at-root [data-platform='mac'] & {
				padding-right: $base-size * 5;
			}

			&::-moz-placeholder {
				opacity: 1;
			}
		}
	}
}

.autocomplete {
	position: absolute;
	z-index: 10;
}

.autocomplete-list {
	a {
		color: $text-color;
		font-size: 14px;

		&:hover {
			text-decoration: none;
		}
	}

	p {
		margin-bottom: 0;
	}

	.autocomplete-title {
		font-weight: bold;
	}

	.list-group .list-group-item {
		border-width: 0;

		&:hover,
		&.active {
			background-color: #f5f9ff;
		}

		&:first-child {
			border-top-left-radius: 4px;
			border-top-right-radius: 4px;
			margin-top: 8px;
		}

		&:last-child {
			border-bottom-left-radius: 4px;
			border-bottom-right-radius: 4px;
		}
	}
}
